<template>
<div>
  <van-popup v-model="device.show" position="bottom" :style="{ height: '100%' }">
    <div class="page">
      <van-nav-bar title="门店设备" left-arrow @click-left="$router.go(-1)"/>
      <div class="page-content">
        <div class="list-item" v-for="(item, index) in device.list" :key="index">
          <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">充电宝机柜</span>
          </div>
          <div class="list-group justify">
            <div class="list-row">
              <span class="label-text">设备编号</span>
              <span class="font-blue">{{ item.equipmentNum }}</span>
            </div>
            <div class="list-row">
              <span class="label-text">上线天数</span>
              <span>{{ item.onlineDays }}</span>
            </div>
          </div>
          <div class="list-group justify" style="padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 14px;">
            <div class="list-row">
              <span @click="device.shengji(item)" class="font-blue">设备升级</span>
               <!-- v-if="$store.getters.ifTan" -->
              <span @click="device.showDetail(item)" class="font-org">弹出设备</span>
              <span @click="device.jiebang(item)" class="font-blue">解绑设备</span>
            </div>
          </div>
        </div>
      </div>
      <div style="background: #fff;">
        <div style="margin: 16px;">
          <van-button block type="info" @click="device.bangding">绑定设备</van-button>
        </div>
      </div>
      <!-- <div style="height: 100px;">
        <van-button block type="info" @click="device.bangding">绑定设备</van-button>
      </div> -->
    </div>
  </van-popup> 
  <device-info ref="device"></device-info>
  <van-action-sheet v-model="device.showAction" :actions="device.actions" @select="device.selectAction" 
    cancel-text="取消" @cancel="device.showAction = false"/>
</div>
</template>

<script>
import DeviceInfo from '../Device/DeviceInfo.vue';
export default {
  components: { DeviceInfo },
  data() {
    return {
      device: {
        show: true,
        list: [],
        shopId: '',
        showAction: false,
        actions: [
          { name: '普通设备' },
          { name: '新48口（双二维码设备）' }
        ],
        selectAction: (obj) => {
          if(obj.name == '新48口（双二维码设备）') {
            this.$dialog({ title: '提示', message: '请扫描设备右侧二维码！' }).then(() => {
              this.$tool.scanEquipment().then(rcode => {
                this.$dialog({ title: '提示', message: '请扫描设备左侧二维码！' }).then(() => {
                  this.saoma(result => {  
                    let lcode = result.split('=')[1];
                    this.device.bang(rcode + '&&' + lcode);
                  });
                });
              });
            });
          } else {
            this.$tool.scanEquipment().then(res => {
              this.device.bang(res);
            });
          }
        },
        bang: (snList) => {
          let userId = this.$store.state.userInfo.userId;
          this.$axios.post('/api/chargerPlaEquipmentController/shopBindingDevice', {
            query: { snList, shopId: this.device.shopId, userId }
          }).then(() => {
            this.$toast('设备绑定成功！');
            this.device.showAction = false;
            this.device.showBlank(this.device.shopId);
          });
        },
        showBlank: (shopId) => {
          // let userId = this.$store.state.userInfo.userId;
          // let vague = 2;
          // this.$axios.get('/api/chargerPlaEquipmentController/getChargerPlaEquipmentList', {
          //   userId, vague, shopId, page: 1, size: 100
          // }).then(res => {
          //   this.device.list = res || [];
          //   this.device.show = true;
          // });
          this.device.shopId = shopId;
          this.$axios.get('/api/ShopManageController/getEquipmentByShopId', {
            shopId
          }).then(res => {
            this.device.list = res || [];
            // if (this.device.list)
            this.device.show = true;
          });
        },
        shengji: (item) => {
          this.$dialog.confirm({ message: `设备升级后会关闭设备大部分提示音，设备升级过程中请保持通电，确定现在要对设备进行升级吗？` }).then(() => {
            this.$axios.get('/api/chargerPlaEquipmentController/terminalVersion', {
              sn: item.equipmentNum
            }).then(res => {
              if(res.canUpdate) {
                this.$axios.get('/api/chargerPlaEquipmentController/terminalUpdate', {
                  sn: item.equipmentNum
                }).then(() => {
                  this.$toast('正在为该设备升级，请保证设备在升级过程中处于通电状态');
                });
              } else {
                this.$toast('设备已升级至最高版本');
              }
            });
          })
        },
        jiebang: (item) => {
          let shopId = this.device.shopId;
          this.$dialog.confirm({
            message: `您确认要解绑 ${ item.equipmentNum } 吗？`
          }).then(() => {
            this.$axios.post('/api/chargerPlaEquipmentController/unbindSnByshop', { 
              query: { snList: item.equipmentNum, shopId } 
            }).then(() => {
              this.$toast(`解绑成功！`);
              this.device.showBlank(shopId);
            });
          });
        },
        showDetail: (item) => {
          this.$refs.device.showBlank({
            shopName: item.shopName,
            equipmentNum: item.equipmentNum,
            shopPhotUrl: item.shopPhotUrl,
            createTime: item.createTime
          });
        },
        bangding: () => {
          this.device.showAction = true;
        }
      }
    };
  },
  created() {
    this.device.showBlank(this.$route.query.shopId);
  }
};
</script>

<style lang="less">
</style>
